<template>
  <div style="position: relative" :id="`upload-custom-${randomUUID_}`">
    <!--  ---------------------------- begin 图片左右换位置 ------------------------------------- -->
    <!-- <div class="movety-container" :style="{top:top+'px',left:left+'px',display:moveDisplay}" style="padding:0 8px;position: absolute;z-index: 91;height: 32px;width: 104px;text-align: center;">
      <div :id="containerId+'-mover'" :class="showMoverTask?'uploadty-mover-mask':'movety-opt'" style="margin-top: 12px">
        <a @click="moveLast" style="margin: 0 5px;"><a-icon type="arrow-left" style="color: #fff;font-size: 16px"/></a>
        <a @click="moveNext" style="margin: 0 5px;"><a-icon type="arrow-right" style="color: #fff;font-size: 16px"/></a>
      </div>
    </div> -->
    <!--  ---------------------------- end 图片左右换位置 ------------------------------------- -->
    <a-upload
      name="file"
      :multiple="multiple"
      :accept="acceptType"
      :data="{ biz: bizPath }"
      :fileList="fileList"
      :beforeUpload="doBeforeUpload"
      :customRequest="customRequest"
      :remove="handleRemove"
      @change="handleChange"
      :disabled="disabled"
      :returnUrl="returnUrl"
      :listType="complistType"
      @preview="handlePreview"
      :showUploadList="showUploadListShow"
      @download="handleDownload"
      :class="{ 'uploadty-disabled': disabled }"
    >
      <template v-if="!(fileList.length >= number || disabled)">
        <div v-if="isImageComp">
          <a-icon type="plus" />
          <div class="ant-upload-text">{{ text }}</div>
        </div>
        <a-button v-else-if="buttonVisible"> <a-icon type="upload" />{{ text }} </a-button>
      </template>
    </a-upload>
    <!-- 视频列表预览 -->
    <template v-if="!showUploadListShow && this.fileType === 'video'">
      <template v-if="fileList && fileList.length > 0">
        <div class="file-list-box" v-for="(item, index) in fileList" :key="index" :style="setStyle(item.status)">
          <slot name="customVideo" :record="item"></slot>
          <template>
            <div class="file-list-box-left">
              <a-icon v-if="item.status === 'uploading'" type="loading" />
              <img v-if="item.status === 'done'" :src="item.thumbUrl" />
              <div class="file-list-box-name">
                <a-tooltip :title="item.name">
                  <span @click="handlePreview(item)">{{ item.name }}</span>
                </a-tooltip>
              </div>
            </div>
            <div class="file-list-box-right">
              <a-tooltip title="播放" v-if="item.status === 'done'">
                <a-icon type="play-circle" @click="handlePreview(item)" />
              </a-tooltip>
              <a-tooltip title="删除" v-if="!disabled">
                <a-icon type="delete" style="margin-left: 8px" @click="handleRemoveFile(item)" />
              </a-tooltip>
            </div>
          </template>
        </div>
      </template>
    </template>
    <!-- 上传进度条 -->
    <a-progress v-if="fileType !== 'image' && percent > 0 && percent < 100" :percent="percent" />
    <a-modal
      v-if="previewVisible"
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
      :width="previewObj.type === 'video' ? '1000px' : '700px'"
    >
      <vue-d-player
        v-if="previewObj.type === 'video'"
        class="dplayer"
        ref="player"
        :options="playerOptions"
        :key="playerOptions.video.url"
      ></vue-d-player>
      <img v-else alt="example" style="width: 100%; margin-top: 30px" :src="previewObj.url" />
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileAccessHttpUrl } from '@/api/manage'
import { Base64 } from 'js-base64'
import Compressor from 'compressorjs'
import { getAction } from '@/api/manage'
import moment from 'moment'
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'
import OSS from 'ali-oss';
import { randomUUID } from '@/utils/util';
import aliOss from '@/utils/alioss';

const getFileName = (path) => {
  if (path.lastIndexOf('\\') >= 0) {
    let reg = new RegExp('\\\\', 'g')
    path = path.replace(reg, '/')
  }
  return decodeURI(path.substring(path.lastIndexOf('/') + 1))
}

export default {
  name: 'JUploadOss',
  components: { VueDPlayer },
  data() {
    return {
      uploadAction: window._CONFIG['domianURL'] + '/file/upload',
      headers: {},
      fileList: [],
      newFileList: [],
      uploadGoOn: true,
      previewVisible: false,
      //---------------------------- begin 图片左右换位置 -------------------------------------
      // previewUrl: '',
      // containerId: '',
      // top: '',
      // left: '',
      // moveDisplay: 'none',
      // showMoverTask: false,
      // moverHold: false,
      // currentImg: '',
      //---------------------------- end 图片左右换位置 -------------------------------------
      year: moment().format('YYYY'),
      month: moment().format('MM'),
      day: moment().format('DD'),
      previewObj: {
        //预览内容
        type: '',
        url: '',
      },
      authConfig: {}, //授权配置信息
      checkpoints: {}, // 所有分片上传文件的检查点
      percent: 0, //上传进度
      isCancel: false, //是否取消上传
      filePath: [],
      imageType: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], //图片格式
      videoType: ['.mp4', '.webm', '.ogg', '.mkv'], //视频格式
      randomUUID_: randomUUID(),
      playerOptions: {
        //视频播放器配置信息
        preload: 'none', //禁止预加载
        video: {
          url: '',
          pic: '', //视频封面
        },
      },
      url: {
        auth: '/api/pda/oss/auth',
      },
    }
  },
  props: {
    text: {
      type: String,
      required: false,
      default: '点击上传',
    },
    fileType: {
      type: String,
      required: false,
      default: 'file', //文件类型:  图片:image, video:视频, 文件:file
    },
    /*这个属性用于控制文件上传的业务路径*/
    bizPath: {
      type: String,
      required: false,
      default: 'test',
    },
    value: {
      type: [String, Array],
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    //此属性被废弃了
    triggerChange: {
      type: Boolean,
      required: false,
      default: false,
    },
    /**
     * update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
     * true：仅返回url
     * false：返回fileName filePath fileSize
     */
    returnUrl: {
      type: Boolean,
      required: false,
      default: true,
    },
    number: {
      //上传数量
      type: Number,
      required: false,
      default: 999,
    },
    buttonVisible: {
      type: Boolean,
      required: false,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    compressImgQuality: {
      //压缩质量，范围从0到1  0表示最低质量，1表示最高质量
      type: Number,
      default: 0.6,
    },
    isCompress: {
      // 是否压缩，默认压缩
      type: Boolean,
      default: true
    },
    limtVideoMaxSize: {
      //限制视频上传大小    1MB = 1024*1024 字节
      type: Number,
      default: 1024 * 1024 * 50,
    },
    limtMaxSize: {
      //限制文件，压缩后的图片上传大小    1MB = 1024*1024 字节
      type: Number,
      default: 1024 * 1024 * 20,
    },
    partSize: {
      //设置分片大小,每片5MB
      type: Number,
      default: 1024 * 1024 * 5,
    },
    parallel: {
      //同时上传的分片数
      type: Number,
      default: 4,
    },
    showUploadList: {
      type: Boolean | Object,
      default: () => {
        return { showRemoveIcon: true, showDownloadIcon: true }
      },
    },
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        let val = this.value
        if (val instanceof Array) {
          if (this.returnUrl) {
            this.initFileList(val.join(','))
          } else {
            this.initFileListArr(val)
          }
        } else {
          this.initFileList(val)
        }
      },
    },
    fileList: {
      immediate: true,
      handler(){
        this.$nextTick(() => {
          let dom = document.getElementById(`upload-custom-${this.randomUUID_}`);
          if(this.fileType === 'image' && dom){
            // 隐藏上传按钮
            if(this.fileList.length >= this.number || this.disabled){
              try{
                dom.getElementsByClassName('ant-upload')[0].style.display = 'none';
              }catch(e){}
            }else{
              try{
                dom.getElementsByClassName('ant-upload')[0].style.display = 'table';
              }catch(e){}
            }
          }
        })
      }
    }
  },
  computed: {
    //文件上传类型
    acceptType() {
      if (this.fileType === 'image') {
        return this.imageType.join(',')
      }
      if (this.fileType === 'video') {
        return this.videoType.join(',')
      } else {
        return ''
      }
    },
    isImageComp() {
      return this.fileType === 'image'
    },
    //上传列表内建样式
    complistType() {
      return this.fileType === 'image' ? 'picture-card' : this.fileType === 'video' ? 'picture' : 'text'
    },
    //是否展示uploadList
    showUploadListShow() {
      return this.fileType === 'video' ? false : this.showUploadList
    },
    //上传url
    uploadUrl() {
      return `${this.bizPath}/${this.year}/${this.month}/${this.day}`
    },
  },
  async created() {
    await aliOss();
    let authInfo = Vue.ls.get('aliOssauthInfo');
    if(authInfo){
      Vue.prototype.$client = new OSS({
        region: authInfo.region,
        accessKeyId: authInfo.accessKeyId,
        accessKeySecret: authInfo.accessKeySecret,
        bucket: authInfo.bucket,
        stsToken: authInfo.securityToken,
        expiration: authInfo.expiration,
        domain: authInfo.domain
      });
    }
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
    this.containerId = 'container-ty-' + new Date().getTime()
  },
  methods: {
    moment,
    //设置动态Style
    setStyle(status) {
      switch (status) {
        case 'uploading':
          return { justifyContent: 'left' }
        case 'done':
          return { justifyContent: 'left' }
        case 'error':
          return { color: '#f5222d', borderColor: '#f5222d' }
      }
    },
    initFileListArr(val) {
      if (!val || val.length == 0) {
        this.fileList = []
        return
      }
      let fileList = []
      for (var a = 0; a < val.length; a++) {
        let url = getFileAccessHttpUrl(val[a].filePath)
        const thumbUrl = this.fileType === 'video' ? this.getVideoFrameImage(url) : null
        fileList.push({
          uid: a,
          name: val[a].fileName,
          status: 'done',
          url: url,
          thumbUrl: thumbUrl,
          response: {
            status: 'history',
            message: val[a].filePath,
          },
        })
      }
      this.fileList = fileList
    },
    initFileList(paths) {
      if (!paths || paths.length == 0) {
        this.fileList = []
        return
      }
      let fileList = []
      let arr = paths.split(',')
      for (var a = 0; a < arr.length; a++) {
        let url = getFileAccessHttpUrl(arr[a])
        const thumbUrl = this.fileType === 'video' ? this.getVideoFrameImage(url) : null
        fileList.push({
          uid: a,
          name: getFileName(arr[a]),
          status: 'done',
          url: url,
          thumbUrl: thumbUrl,
          response: {
            status: 'history',
            message: arr[a],
          },
        })
      }
      this.fileList = fileList
    },

    handlePathChange() {
      let uploadFiles = this.fileList
      let path = ''
      if (!uploadFiles || uploadFiles.length == 0) {
        path = ''
      }
      let arr = []

      for (var a = 0; a < uploadFiles.length; a++) {
        // update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
        if (uploadFiles[a].status === 'done') {
          arr.push(uploadFiles[a].response.message)
        } else {
          return
        }
        // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
      }
      if (arr.length > 0) {
        path = arr.join(',')
      }
      this.$emit('change', path)
    },
    //上传前处理
    doBeforeUpload(file, fileList) {
      const that = this
      let fileObj = file
      this.uploadGoOn = true
      // const match = fileObj.name.match(/\.([^.]+)$/);
      let suffix = that.getFileExtension(file.name).toLowerCase()
      return new Promise(async (resolve, reject) => {
        //视频类型
        if (this.videoType.indexOf(`.${suffix}`) > -1) {
          if (fileObj.size > that.limtVideoMaxSize) {
            that.$message.warning(`上传视频大小不能超过${that.limtVideoMaxSize / 1024 / 1024}MB`)
            return false
          } else {
            resolve(fileObj)
          }
        } else {
          if(this.fileType === 'image'){
            if (this.imageType.indexOf(`.${suffix}`) > -1) {
              if(this.isCompress){
                fileObj = await that.compressImg(file)
                fileObj.uid = file.uid
              }
            }else{
              this.$message.warning( `禁止上传.${suffix}文件`)
              return false;
            }
          }
          if (fileObj.size > that.limtMaxSize) {
            that.$message.warning(`上传文件大小不能超过${that.limtMaxSize / 1024 / 1024}MB`)
            return false
          } else {
            resolve(fileObj)
          }
        }
      })
    },
    //压缩图片
    compressImg(file) {
      const that = this
      return new Promise(function (resolve, reject) {
        new Compressor(file, {
          quality: that.compressImgQuality,
          success(result) {
            //blob转file
            // const files = new File([result], result.name, { type: result.type })
            resolve(result)
          },
          error(err) {
            reject(err)
            console.log('压缩失败', err)
          },
        })
      })
    },
    //自定义上传
    customRequest(file) {
      this.isCancel = false
      //如果文件大小小于分片大小，使用普通上传，否则使用分片上传
      if (file.file.size < this.partSize) {
        this.commonUpload(file)
      } else {
        this.multipartUploadHandle(file)
      }
    },
    //普通上传
    async commonUpload(data) {
      let file = data.file
      // const ossClient = await initOSSClient()
      return this.$client
        .put(`${this.uploadUrl}/${file.name}`, file)
        .then((res) => {
          if (res.res.requestUrls && res.res.requestUrls.length > 0) {
            this.$message.success('上传成功')
            let response = {
              success: true,
              message: this.callBackUrl(res.res.requestUrls[0]),
              data,
            }
            data.onSuccess(response)
          } else {
            data.onError()
          }
        })
        .catch((err) => {
          data.onError()
        })
    },
    // 分片上传
    async multipartUploadHandle(data) {
      const that = this
      let file = data.file
      // const ossClient = await initOSSClient()
      const fileName = file.name
      try{ 
      return this.$client
        .multipartUpload(`${that.uploadUrl}/${fileName}`, file, {
          partSize: that.partSize,
          parallel: that.parallel,
          progress: (progress, checkpoint) => {
            that.percent = Number((Number(progress) * 100).toFixed(1))
            // 取消上传或stsToken过期，则中断分片上传
            let nowDate = moment().format('YYYY-MM-DD HH:mm:ss')
            let expiration = moment(this.$client.options.expiration).format('YYYY-MM-DD HH:mm:ss')
            if (that.isCancel || moment(nowDate).isAfter(expiration)) {
              // that.$message.warning('ststoken已过期')
              this.$client.cancel()
              that.isCancel = false
              that.percent = 0
            }
          },
        })
        .then((result) => {
          if (result.res.requestUrls && result.res.requestUrls.length > 0) {
            data.onSuccess({ success: true, message: that.callBackUrl(result.res.requestUrls[0]), data })
          } else {
            data.onError()
          }
        })
        .catch((err) => {
          data.onError()
        })
     }catch(e){}
    },
    //获取视频缩略图
    getVideoFrameImage(url) {
      return url + `?x-oss-process=video/snapshot,t_10,f_jpg,w_900,h_507,m_fast`
    },
    // async getVideoFrameImageOld(url, currentTime = 1, width = 350, height = 250) {
    //   let videoCoverUrl = await new Promise((resolve, reject) => {
    //     const video = document.createElement('video')
    //     video.setAttribute('crossOrigin', 'anonymous')
    //     video.setAttribute('preload', 'metadata')
    //     video.setAttribute('src', url)
    //     video.currentTime = currentTime
    //     video.addEventListener('loadeddata', function () {
    //       const canvas = document.createElement('canvas')
    //       const { videoWidth, videoHeight } = video
    //       const newHeight = height || videoHeight * (width / videoWidth)
    //       canvas.width = width
    //       canvas.height = newHeight
    //       canvas.getContext('2d').drawImage(video, 0, 0, width, height)
    //       resolve(canvas.toDataURL('image/jpeg'))
    //     })
    //     video.addEventListener('error', function (e) {
    //       reject(null)
    //     })
    //   })
    //   return videoCoverUrl
    // },
    //上传成功回调url处理
    // 1.分片上传会将uploadId返回到地址当中，需将uploadId去除;
    // 2.返回的地址做了编码处理，页面显示的时候需做url解码处理;
    // 3.域名地址替换
    callBackUrl(url) {
      let urls = url.indexOf('?uploadId=') > -1 ? url.split('?uploadId=')[0] : url
      let urlObj = new URL(urls)
      urlObj.hostname = new URL(this.$client.options.domain).hostname
      urlObj.protocol = new URL(this.$client.options.domain).protocol
      this.$emit('handleAdd', decodeURI(urlObj.href));
      return decodeURI(urlObj.href)
    },
    handleChange(info) {
      console.log('--文件列表改变--')
      if (!info.file.status && this.uploadGoOn === false) {
        info.fileList.pop()
      }
      let fileList = info.fileList
      if (info.file.status === 'done') {
        if (this.number > 0) {
          fileList = fileList.slice(-this.number)
        }
        if (info.file.response.success) {
          fileList = fileList.map((file) => {
            if (file.response) {
              let reUrl = file.response.message
              file.url = getFileAccessHttpUrl(reUrl)
            }
            return file
          })
        }
        //this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
        this.percent = 0
      } else if (info.file.status === 'removed') {
        this.isCancel = true
        this.handleDelete(info.file)
      }
      this.fileList = fileList
      if (info.file.status === 'done' || info.file.status === 'removed') {
        //returnUrl为true时仅返回文件路径
        if (this.returnUrl) {
          this.handlePathChange()
        } else {
          //returnUrl为false时返回文件名称、文件路径及文件大小
          this.newFileList = []
          for (let a = 0; a < fileList.length; a++) {
            // update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
            if (fileList[a].status === 'done') {
              let fileJson = {
                fileName: fileList[a].name,
                filePath: fileList[a].response.message,
                fileSize: fileList[a].size,
              }
              this.newFileList.push(fileJson)
            } else {
              return
            }
            // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
          }
          this.$emit('change', this.newFileList)
        }
      }
    },
    //删除
    handleDelete(file) {
      // const ossClient = await initOSSClient()
      // ossClient.cancel()
      // this.isCancel = false
    },
    //删除
    handleRemoveFile(file) {
      const { remove: onRemove } = this
      const fileLists = this.fileList
      this.percent = 0
      this.isCancel = true
      Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then((res) => {
        if (res === false) {
          return
        }
        const removedFileList = fileLists.filter((item) => item.uid !== file.uid)
        if (removedFileList) {
          file.status = 'removed'
          this.handleChange({ file, fileList: removedFileList })
        }
      })
    },
    handlePreview(file) {
      if (this.fileType === 'image') {
        // this.previewObj.url = file.url || file.thumbUrl
        // this.previewObj.type = 'image'
        // this.previewVisible = true
        if(file.url || file.thumbUrl){
          this.$viewerApi({images: [file.url || file.thumbUrl]});
        }
      } else if (file.url) {
        //判断视频预览，文件预览
        //获取文件后缀名
        //let dotIndex = file.name.lastIndexOf('.')
        // let suffix = dotIndex > -1 ? file.name.substring(dotIndex + 1) : ''
        let suffix = this.getFileExtension(file.name).toLowerCase()
        if (this.videoType.indexOf(`.${suffix}`) > -1) {
          this.previewObj.type = 'video'
          this.playerOptions.video.url = file.url.split('?uploadId=')[0]
          this.playerOptions.video.pic = file.thumbUrl
          this.previewVisible = true
        } else {
          // 此base地址可以配置到一个常量文件里
          let base = `${window._CONFIG['onlinePreviewDomainURL']}?url=`
          let url = base + encodeURIComponent(Base64.encode(file.url))
          window.open(url, '_blank')
        }
      }
    },
    //获取文件名后缀
    getFileExtension(name) {
      const match = name.match(/\.([^.]+)$/)
      return match ? match[1] : ''
    },
    // 文件下载
    async handleDownload(file) {
      try {
        const response = await fetch(file.url);
        if(!response.ok){
          this.$message.warning('下载失败!');
          return;
        }
        const blob = await response.blob();
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = file.name;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        this.$message.warning('下载失败!');
      }
    },
    //关闭弹窗
    handleCancel() {
      // if (this.previewObj.type === 'video') {
      //   this.$refs.player.dp.destroy()
      // }
      this.previewVisible = false
    },

    //---------------------------- begin 图片左右换位置 -------------------------------------
    // moveLast() {
    //   let index = this.getIndexByUrl()
    //   if (index == 0) {
    //     this.$message.warn('未知的操作')
    //   } else {
    //     let curr = this.fileList[index].url
    //     let last = this.fileList[index - 1].url
    //     let arr = []
    //     for (let i = 0; i < this.fileList.length; i++) {
    //       if (i == index - 1) {
    //         arr.push(curr)
    //       } else if (i == index) {
    //         arr.push(last)
    //       } else {
    //         arr.push(this.fileList[i].url)
    //       }
    //     }
    //     this.currentImg = last
    //     this.$emit('change', arr.join(','))
    //   }
    // },
    // moveNext() {
    //   let index = this.getIndexByUrl()
    //   if (index == this.fileList.length - 1) {
    //     this.$message.warn('已到最后~')
    //   } else {
    //     let curr = this.fileList[index].url
    //     let next = this.fileList[index + 1].url
    //     let arr = []
    //     for (let i = 0; i < this.fileList.length; i++) {
    //       if (i == index + 1) {
    //         arr.push(curr)
    //       } else if (i == index) {
    //         arr.push(next)
    //       } else {
    //         arr.push(this.fileList[i].url)
    //       }
    //     }
    //     this.currentImg = next
    //     this.$emit('change', arr.join(','))
    //   }
    // },
    getIndexByUrl() {
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url === this.currentImg || encodeURI(this.fileList[i].url) === this.currentImg) {
          return i
        }
      }
      return -1
    },
    handleRemove(file){
      this.$emit('handleRemove', file.uid);
    }
  },
  // mounted() {
  //   const moverObj = document.getElementById(this.containerId + '-mover')
  //   if (moverObj) {
  //     moverObj.addEventListener('mouseover', () => {
  //       this.moverHold = true
  //       this.moveDisplay = 'block'
  //     })
  //     moverObj.addEventListener('mouseout', () => {
  //       this.moverHold = false
  //       this.moveDisplay = 'none'
  //     })
  //   }

  //   let picList = document.getElementById(this.containerId)
  //     ? document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card')
  //     : []
  //   if (picList && picList.length > 0) {
  //     picList[0].addEventListener('mouseover', (ev) => {
  //       ev = ev || window.event
  //       let target = ev.target || ev.srcElement
  //       if ('ant-upload-list-item-info' == target.className) {
  //         this.showMoverTask = false
  //         let item = target.parentElement
  //         this.left = item.offsetLeft
  //         this.top = item.offsetTop + item.offsetHeight - 50
  //         this.moveDisplay = 'block'
  //         this.currentImg = target.getElementsByTagName('img')[0].src
  //       }
  //     })

  //     picList[0].addEventListener('mouseout', (ev) => {
  //       ev = ev || window.event
  //       let target = ev.target || ev.srcElement
  //       if ('ant-upload-list-item-info' == target.className) {
  //         this.showMoverTask = true
  //         setTimeout(() => {
  //           if (this.moverHold === false) this.moveDisplay = 'none'
  //         }, 100)
  //       }
  //       if (
  //         'ant-upload-list-item ant-upload-list-item-done' == target.className ||
  //         'ant-upload-list ant-upload-list-picture-card' == target.className
  //       ) {
  //         this.moveDisplay = 'none'
  //       }
  //     })

  //   }
  // },
  model: {
    prop: 'value',
    event: 'change',
  },
}
</script>

<style lang="less" scoped>
.uploadty-disabled {
  .ant-upload-list-item {
    .anticon-close {
      display: none;
    }
    .anticon-delete {
      display: none;
    }
  }
}
//---------------------------- begin 图片左右换位置 -------------------------------------
.uploadty-mover-mask {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.8;
  color: #fff;
  height: 28px;
  line-height: 28px;
}
//---------------------------- end 图片左右换位置 -------------------------------------
// .dplayer {
//   width: 400px;
//   height: 250px;
// }
.dplayer {
  margin: 30px auto;
  width: 900px;
  height: 507px;
}
.playerCard {
  width: 200px;
  height: 150px;
}
.file-list-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin: 4px;
  .file-list-box-left {
    width: calc(100% - 36px);
    display: flex;
    align-items: center;
    img {
      width: 70px;
      height: 50px;
    }
    .file-list-box-name {
      width: calc(100% - 80px);
      margin-left: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      overflow: hidden;
      cursor: pointer;
    }
  }
  .file-list-box-right {
    width: 36px;
    text-align: right;
    // color: rgba(0, 0, 0, 0.45);
    .anticon {
      cursor: pointer;
    }
  }
}
.errorStatus {
  border: 1px solid red;
  color: red;
  .anticon {
    color: red !important;
  }
}
</style>